<template>
  <div>
    <a-list class="home-link">
      <a-list-item v-for="item in bodyLink" :key="item.key">
          <a-list-item-meta :title="item.title" :description="item.description">
              <a-avatar style="border-radius: 0;" slot="avatar" :src="item.icon"/>
          </a-list-item-meta>
        <a-button type="link" @click="toPath(item.name)">查看</a-button>
      </a-list-item>
    </a-list>
          <ul class="total-ul" style="margin-top: 20px">
            <li>
               <label class="total-title">人数合计</label>
               <h3 class="total-num">{{data.headCount}}</h3>
               <p class="total-img total-bg6"><img src="~@/assets/total06.png"></p>
               <div class="total-pors">
                <label><span class="total-test">线上</span><span class="total-col">{{data.onlineHeadCount}}</span></label>
                <label><span class="total-test">线下</span><span class="total-cols">{{data.offlineHeadCount}}</span></label>
               </div>
            </li>
            <li>
               <label class="total-title">批次合计</label>
               <h3 class="total-num">{{data.batchCount}}</h3>
               <p class="total-img total-bg5"><img src="~@/assets/total05.png"></p>
               <div class="total-pors">
                <label><span class="total-test">线上</span><span class="total-col">{{data.onlineBatchCount}}</span></label>
                <label><span class="total-test">线下</span><span class="total-cols">{{data.offlineBatchCount}}</span></label>
               </div>
            </li>
            <li>
               <label class="total-title">笔数合计</label>
               <h3 class="total-num">{{data.strokeCount}}</h3>
               <p class="total-img total-bg4"><img src="~@/assets/total04.png"></p>
               <div class="total-pors">
                <label><span class="total-test">线上</span><span class="total-col">{{data.onlineStrokeCount}}</span></label>
                <label><span class="total-test">线下</span><span class="total-cols">{{data.offlineStrokeCount}}</span></label>
               </div>
            </li>
          </ul>

          <ul class="total-ul" style="margin-top: 20px">
            <li>
               <label class="total-title">发放金额合计</label>
               <h3 class="total-num">{{data.settleAmount}}</h3>
               <p class="total-img total-bg2"><img src="~@/assets/total02.png"></p>
               <div class="total-pors">
                <label><span class="total-test">线上</span><span class="total-col">{{data.onlineSettleAmount}}</span></label>
                <label><span class="total-test">线下</span><span class="total-cols">{{data.offlineSettleAmount}}</span></label>
               </div>
            </li>
            <li>
               <label class="total-title">服务费合计</label>
               <h3 class="total-num">{{data.serviceFeeAmount}}</h3>
               <p class="total-img total-bg1"><img src="~@/assets/total01.png"></p>
               <div class="total-pors">
                <label><span class="total-test">线上</span><span class="total-col">{{data.onlineServiceFeeAmount}}</span></label>
                <label><span class="total-test">线下</span><span class="total-cols">{{data.offlineServiceFeeAmount}}</span></label>
               </div>
            </li>
            <li>
               <label class="total-title">开票金额合计</label>
               <h3 class="total-num">{{data.invoiceAmount}}</h3>
               <p class="total-img total-bg3"><img src="~@/assets/total03.png"></p>
               <div class="total-pors">
                <label><span class="total-test">线上</span><span class="total-col">{{data.onlineInvoiceAmount}}</span></label>
                <label><span class="total-test">线下</span><span class="total-cols">{{data.offlineInvoiceAmount}}</span></label>
               </div>
            </li>
          </ul>
    
  </div>
</template>

<script>
import { timeFix } from '@/utils/util'
import { mapState } from 'vuex'
import { Modal } from 'ant-design-vue'
import signicon from '@/assets/sign.png'
import billingicon from '@/assets/billing.png'
import taskicon from '@/assets/task.png'
import settleicon from '@/assets/settle.png'

import total01 from '@/assets/total01.png'
import total02 from '@/assets/total02.png'
import total03 from '@/assets/total03.png'
import total04 from '@/assets/total04.png'
import total05 from '@/assets/total05.png'
import total06 from '@/assets/total06.png'

import moment from "moment"
import {getAllParkOrEnterpriseStatistics} from '@/api/manage/statistics'
export default {
  name: 'Workplace',
  data () {
    return {
      timeFix: timeFix(),
      user: {},
      bodyLink:[
        {title:"自由职业者签约",description:"签约管理 签约方式",name:'applicationUserSignCode',link:'',icon:signicon,key:1},
        {title:"开票申请",description:"申请开票，查看开票记录",name:'financeBillingCode',link:'',icon:billingicon,key:2},
        {title:"发布任务",description:"创建任务，导入结算，生成结算",name:'applicationTaskCode',link:'',icon:taskicon,key:3},
        {title:"结算账单",description:"银行凭证信息，导出账单",name:'applicationSettleBillCode',link:'',icon:settleicon,key:4}
      ],
      data:{
        headCount:'',
        onlineHeadCount:'',
        offlineHeadCount:'',
        batchCount:'',
        onlineBatchCount:'',
        offlineBatchCount:'',
        strokeCount:'',
        onlineStrokeCount:'',
        offlineStrokeCount:'',
        settleAmount:'',
        onlineSettleAmount:'',
        offlineSettleAmount:'',
        serviceFeeAmount:'',
        onlineServiceFeeAmount:'',
        offlineServiceFeeAmount:'',
        invoiceAmount:'',
        onlineInvoiceAmount:'',
        offlineInvoiceAmount:'',
      },
      enterpriseId:'',
      enterpriseData:[],
    }
  },
  computed: {
    ...mapState({
      nickname: (state) => state.user.nickname,
      welcome: (state) => state.user.welcome
    }),
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.user = this.userInfo;
    //  this.loadTable();
  },
  methods: {
    toPath(nameCode){
      this.$router.push({name:nameCode});
    },
    async loadTable(){
        let params = {};
        params.enterpriseId = this.enterpriseId;
        params.queryType = 1;
        const {code,data} = await getAllParkOrEnterpriseStatistics(params);
        if(code ==='1'){
           if(data !== null){
            for(var keys in data){
              this.data[keys] = data[keys];
            }
           }
        }
    },
  }
}
</script>

<style>
  .msg-box{
    width: 100%;
    height: 93px;
    background-image: url('../assets/msg_title.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
  }
  .msg-title{
    font-size: 16px;
    color: #000;
    line-height: 24px;
    width: 400px;
    padding-bottom: 10px;
    padding-top: 90px;
  }
  .msg-deta{
    font-size: 12px;
    color: rgba(0,0,0,.4);
    line-height: 18px;
  }
  .msg-content{
    min-height: 30vh;
    padding-top: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    color: rgba(0,0,0,.6);
    line-height: 27px;
  }
  .home-link li:nth-child(1) .ant-list-item-meta-avatar{
    padding: 10px;
    background: rgb(255,169,35,0.1);
    border-radius: 6px;
  }
  .home-link li:nth-child(2) .ant-list-item-meta-avatar{
    padding: 10px;
    background: rgb(254,32,26,0.1);
    border-radius: 6px;
  }
  .home-link li:nth-child(3) .ant-list-item-meta-avatar{
    padding: 10px;
    background: rgb(17,205,111,0.1);
    border-radius: 6px;
  }
  .home-link li:nth-child(4) .ant-list-item-meta-avatar{
    padding: 10px;
    background: rgb(147,114,254,0.1);
    border-radius: 6px;
  }
  .home-link .ant-spin-container{
    display: flex;
  }
  .home-link .ant-list-item{
    flex: 1;
    border-bottom: 0 !important;
    background: #fff;
    margin-right: 20px;
    padding: 15px 20px;
    cursor: pointer;
  }
  .home-link .ant-list-item:last-child{
    margin-right: 0;
  }
 
  


  .total-form{
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .total-ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
  }
  .total-ul li{
    background: #fff;
    border-radius: 12px;
    padding: 20px 15px;
    position: relative;
    flex: 1;
  }
  /*  nth-child(3n+2)  3n表示“每三分之一”，而+2表示“从第二位开始”。  */
  .total-ul li:nth-child(3n+2) {
      margin: 0 20px;
  }
  .total-title{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #111111;
    margin-bottom: 24px;
    display: block;
  }
  .total-num{
    font-size: 28px;
    font-family: Century Gothic;
    font-weight: 400;
    color: #111111;
    margin-bottom: 25px;
  }
  .total-img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    right: 20px;
  }
  .total-bg6{
    background: rgb(255,169,35,0.2);
    padding: 16px 10px;
  }
  .total-bg5{
    background: rgb(254,44,39,0.2);
    padding: 20px 10px;
  }
  .total-bg4{
    background: rgb(9, 180, 42,0.2);
    padding: 17px 10px;
  }
  .total-bg1{
    background: rgb(142, 111, 254,0.2);
    padding: 19px 10px;
  }
  .total-bg2{
    background: rgb(16, 83, 245,0.2);
    padding: 17px 10px;
  }
  .total-bg3{
    background: rgb(31, 180, 148,0.2);
    padding: 19px 10px;
  }
  .total-img img{
    display: block;
    width: 60%;
    margin: 0 auto;
  }
  .total-test{
    font-size: 15px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
display: inline-block;
margin-right: 10px;
  }
  .total-col{
    font-size: 16px;
font-family: Century Gothic;
font-weight: 400;
color: #44BB51;
display: inline-block;
margin-right: 50px;
  }
  .total-cols{
    font-size: 16px;
font-family: Century Gothic;
font-weight: 400;
color: #397CFE;
display: inline-block;
  }
</style>
